/**
 * 按原型只有一个新建按钮
 */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import _ from 'lodash';
import { Button, Input, Modal, Select, message } from 'antd';
import Pc, { isReleaseVersion } from '../../components/permissionControl';
import { api as apiPaths } from '../../services/device';
import { api as deviceLaunchPaths } from '../../services/serviceMode';
import AssignBox from './assignBox';
import SelectTable from './selectTable';
import Export from '../../components/export';
import { columns } from './table';

const styles = {
	main: {
		margin: '1em 0',
		marginBottom: '3.7em'
	},
	bv: {
		float: 'right'
	},
	select: {
		width: '10em'
	},
	rp: {
		display: 'inline-block',
		width: '200px',
		paddingLeft: '10px'
	},
	input: {
		width: '10em',
		margin: '0 1em'
	},
	dr: {
		display: 'inline-block',
		paddingLeft: '1em',
		paddingRight: '1em',
	},
	but: {
		marginRight: '1em'
	},
	s: {
		float: 'right'
	},
	rd: {
		float: 'right',
		paddingTop: '10px',
		paddingRight: '1em'
	},
	searchBox: {
		padding: '10px',
		borderRadius: '6px'
	}
};

export const options = [
	{ name: '设备MAC', value: 'mac' },
	{ name: '序列号', value: 'sno' },
	{ name: '设备名称', value: 'deviceName' },
	{ name: '场地名称', value: 'deviceLocation' }
];
export const options1 = [
	{ name: '设备MAC', value: 'mac' },
	{ name: '序列号', value: 'sno' },
	{ name: '设备名称', value: 'deviceName' },
];

export const workStatusLease = [
	{ name: '设备状态', value: '' },
	{ name: '使用中', value: 3 },
	{ name: '空闲', value: 4 },
	{ name: '禁用', value: 5 },
	{ name: '故障', value: 6 }
];
export const workStatusGdms = [
	{ name: '设备状态', value: '' },
	{ name: '正常', value: 8 },
	{ name: '故障', value: 6 },
	{ name: '报警', value: 9 },
];

export const onlineStatus = [
	{ name: '在线状态', value: '' },
	{ name: '在线', value: 1 },
	{ name: '离线', value: 2 }
];

class Filter extends Component {
	constructor(props, context) {
		super(props, context);
		this.state = {
			key: 'mac',
			workStatusKey: '',
			onlineStatusKey: '',
			keyWord: ''
		};
		this.key = Math.random();
	}

	onlineStatusKeyChange = key => {
		this.setState({ onlineStatusKey: key });
	}

	getQueryData(reload) {
		const { key, keyWord, workStatusKey, onlineStatusKey } = this.state;
		this.random = reload === 1 ? Math.random() : this.random;
		return {
			[key]: keyWord,
			workStatus: workStatusKey,
			onlineStatus: onlineStatusKey,
			[`reload${this.key}`]: this.random
		};
	}

	change = e => {
		this.setState({ keyWord: e.target.value });
	}

	keyChange = key => {
		this.setState({ key, keyWord: '' });
	}

	workStatusKeyChange = key => {
		this.setState({ workStatusKey: key });
	}

	search = (reload) => {
		// 收集参数，调用上层
		this.props.query(this.getQueryData(reload));
	}

	showAddModal = () => {
		this.props.dispatch({
			type: 'device/set',
			payload: {
				isShowAdd: true
			}
		});
	}

	showDelete = () => {
		const keys = this.props.keys;
		if (!keys || !keys.length) {
			message.warning('请选择要删除的设备');
			return;
		}
		this.setState({ modalVisible: true });
	}

	delete = () => {
		this.setState({ modalVisible: false });
		this.props.dispatch({
			type: 'device/delete',
			payload: this.props.keys
		});
	}

	reset = () => {
		// 清理参数，调用上层
		this.setState({
			key: 'mac',
			keyWord: '',
			workStatusKey: '',
			onlineStatusKey: ''
		}, this.search);
	}

	batch = (v) => {
		const { keys, dispatch } = this.props;
		if (!keys || !keys.length) {
			message.warning('请选择设备');
			return;
		}
		this.setState({ modeType: v }, () => dispatch({ type: 'device/showModal' }));
	}

	render() {
		const { key, workStatusKey, onlineStatusKey, keyWord, modalVisible, modeType } = this.state;
		const { keys, exportTitle, user, device: { tableDisplay } } = this.props;
		const isRelease = isReleaseVersion(user.permissions, apiPaths.query);
		return (
			<div style={styles.main}>
				<div style={styles.searchBox}>
					<Select style={styles.select} value={key} onChange={this.keyChange}>
						{(isRelease ? options : options1).map(o => <Option value={o.value}>{o.name}</Option>)}
					</Select>
					<Input placeholder="输入关键字" style={styles.input} value={keyWord} onChange={this.change} />

					{/* <div style={styles.dr}>
						<Select style={styles.select} value={workStatusKey} onChange={this.workStatusKeyChange}>
							{(isRelease ? workStatusLease : workStatusGdms).map(o => <Option value={o.value}>{o.name}</Option>)}
						</Select>
					</div>*/}

					<div style={styles.dr} >
						<Select style={styles.select} value={onlineStatusKey} onChange={this.onlineStatusKeyChange}>
							{onlineStatus.map(o => <Option value={o.value}>{o.name}</Option>)}
						</Select>
					</div>

					<div style={styles.s}>
						<Button
							type="primary"
							style={styles.but}
							onClick={this.search}
							icon="search"
							className="search"
						>搜索</Button>
						<Button onClick={this.reset} icon="sync">重置</Button>
					</div>
				</div>
				<div style={styles.rd}>
					<Pc url={`${apiPaths.assignDeviceBatch}-mode`}>
						<Button style={styles.but} onClick={() => this.batch(false)} icon="pay-circle-o" className="opt-but">收费</Button>
					</Pc>
					<Pc url={`${apiPaths.assignDeviceBatch}-area`}>
						<Button style={styles.but} onClick={() => this.batch(true)} icon="export" className="opt-but">投放</Button>
					</Pc>
					<AssignBox user={user} deviceIds={keys} success={() => this.search(1)} />
					<Export
						columns={columns}
						title={exportTitle}
						queryData={this.getQueryData()}
						tableDisplay={tableDisplay}
						ids={keys}
					/>
					<Pc url={apiPaths.importDevice}>
						<Link to="/deviceList/import"><Button icon="upload" className="opt-but" style={styles.but}>导入</Button></Link>
					</Pc>
					<Pc url={apiPaths.create}>
						<Button icon="plus" className="opt-but" style={styles.but} onClick={this.showAddModal}>添加</Button>
					</Pc>
					<Pc url={apiPaths.deleteDevice}>
						<Button icon="delete" className="opt-but" onClick={this.showDelete}>删除</Button>
					</Pc>
				</div>
				<Modal
					title="删除选中设备"
					visible={modalVisible}
					onOk={this.delete}
					onCancel={() => this.setState({ modalVisible: false })}
				>
					确定要删除选择中的设备吗？
				</Modal>
				<Pc url={deviceLaunchPaths.query}>
					<SelectTable modeType={modeType} keys={keys} reflesh={this.search} multiselect={false/* _.get(user, 'roles[0].isAddMoreServiceMode')*/} />
				</Pc>
			</div>
		);
	}
}

export default connect(
	({ device, app }) => ({ device, user: app.user })
)(Filter);
